<template>
     <div class="breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
               <el-breadcrumb-item
                    v-for="(item, index) in breadcrumbList"
                    :key="index"
                    :to="{ path: item.path }"
                    :class="{
                         'breadcrumb-item--active':
                              index === breadcrumbList.length - 1,
                    }"
               >
                    <i v-if="item.meta?.icon" :class="item.meta.icon"></i>
                    <span>{{ item.meta?.title }}</span>
               </el-breadcrumb-item>
          </el-breadcrumb>
     </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'

// 获取当前路由信息
const route = useRoute()

/**
 * 计算面包屑导航列表
 * @returns 面包屑导航项数组
 */
const breadcrumbList = computed(() => {
     // 获取当前路由的匹配记录
     const matched = route.matched

     // 过滤掉隐藏的路由项并返回
     return matched.filter((item) => {
          return !item.meta?.hidden
     })
})
</script>

<style scoped lang="scss">
.breadcrumb {
     padding: 12px 20px;
     background-color: var(--mainBox-theme-color);
     border-radius: 6px;
     transition: all 0.3s ease;

     .breadcrumb-item--active {
          color: var(--primary-color, #1890ff);
          font-weight: 500;

          i {
               margin-right: 6px;
               transition: all 0.3s ease;
          }
     }

     .el-breadcrumb__item {
          font-size: 14px;
          transition: all 0.3s ease;

          i {
               margin-right: 6px;
               font-size: 14px;
               vertical-align: middle;
          }

          &:hover {
               color: var(--primary-color, #1890ff);
               transition: color 0.3s ease;
          }

          .el-breadcrumb__separator {
               margin: 0 10px;
               color: #909399;
               font-size: 16px;
          }
     }
}
</style>
